<template>
  <div class="app-container home">
    <!-- 我的待办 - 主要展示模块 -->
    <div class="todo-main-section">
      <el-card class="approval-todo-card" shadow="hover">
        <template #header>
          <div class="card-header">
            <div class="header-left">
              <el-icon class="header-icon">
                <DocumentChecked />
              </el-icon>
              <span class="header-title">我的待办</span>
            </div>
            <div class="header-right">
              <el-button type="primary" size="small" text @click="refreshData" :loading="loading">
                <el-icon>
                  <Refresh />
                </el-icon>
                刷新
              </el-button>
            </div>
          </div>
        </template>

        <!-- 统计概览 -->
        <div class="statistics-overview">
          <div class="stat-item pending" @click="activeTab = 'pending'">
            <div class="stat-number">{{ statistics.pendingCount || 0 }}</div>
            <div class="stat-label">待审核</div>
            <el-icon class="stat-icon">
              <Clock />
            </el-icon>
          </div>
          <div class="stat-item completed" @click="activeTab = 'completed'">
            <div class="stat-number">{{ statistics.completedCount || 0 }}</div>
            <div class="stat-label">已审核</div>
            <el-icon class="stat-icon">
              <CircleCheck />
            </el-icon>
          </div>
          <div class="stat-item submitted" @click="activeTab = 'submitted'">
            <div class="stat-number">{{ statistics.submittedCount || 0 }}</div>
            <div class="stat-label">我的提交</div>
            <el-icon class="stat-icon">
              <Upload />
            </el-icon>
          </div>
          <div class="stat-item cc" @click="activeTab = 'cc'">
            <div class="stat-number">{{ statistics.ccCount || 0 }}</div>
            <div class="stat-label">抄送给我</div>
            <el-icon class="stat-icon">
              <ChatDotSquare />
            </el-icon>
          </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filter-section">
          <div class="filter-content">
            <div class="filter-label">
              <el-icon class="filter-icon">
                <Filter />
              </el-icon>
              <span>业务类型筛选：</span>
            </div>
            <div class="filter-controls">
              <el-select v-model="businessTypeFilter" placeholder="请选择业务类型" clearable size="default"
                style="width: 280px" :loading="loadingTemplates" @change="handleBusinessTypeChange"
                @clear="clearFilter">
                <el-option v-for="template in availableBusinessTypes" :key="template.templateType"
                  :label="`${template.templateName} (${template.templateType})`" :value="template.templateType" />
              </el-select>
              <el-button v-if="businessTypeFilter" type="info" size="default" plain @click="clearFilter"
                style="margin-left: 12px">
                清除筛选
              </el-button>
            </div>
          </div>
        </div>

        <!-- 标签页 -->
        <el-tabs v-model="activeTab" class="approval-tabs" @tab-change="handleTabChange">
          <el-tab-pane label="待审核" name="pending">
            <div class="tab-content">
              <div v-if="loading" class="loading-container">
                <el-skeleton :rows="5" animated />
              </div>
              <div v-else-if="records.pendingApprovals?.length > 0" class="approval-list">
                <div v-for="item in records.pendingApprovals" :key="item.id" class="approval-item pending-item"
                  @click="handleItemClick(item, 0)">
                  <div class="item-left">
                    <div class="item-header">
                      <div class="item-title">{{ item.businessTitle }}</div>
                      <span class="meta-time">{{ formatTime(item.createTime) }}</span>
                    </div>
                  </div>
                  <div class="item-right">
                    <el-tag type="warning" size="small">
                      第{{ item.approvalCurrentStage }}阶段
                    </el-tag>
                  </div>
                </div>
              </div>
              <div v-else class="empty-state">
                <el-empty description="暂无待审核任务" :image-size="120" />
              </div>

              <!-- 分页组件 -->
              <div v-if="pagination.pending.total > 0" class="pagination-container">
                <pagination :total="pagination.pending.total" v-model:page="pagination.pending.currentPage"
                  v-model:limit="pagination.pending.pageSize" :page-sizes="[10, 20, 30, 50]"
                  @pagination="() => loadCurrentTabData()" />
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="已审核" name="completed">
            <div class="tab-content">
              <div v-if="loading" class="loading-container">
                <el-skeleton :rows="5" animated />
              </div>
              <div v-else-if="records.completedApprovals?.length > 0" class="approval-list">
                <div v-for="item in records.completedApprovals" :key="item.id" class="approval-item completed-item"
                  @click="handleItemClick(item, 1)">
                  <div class="item-left">
                    <div class="item-header">
                      <div class="item-title">{{ item.businessTitle }}</div>
                      <span class="meta-time">{{ formatTime(item.createTime) }}</span>
                    </div>
                  </div>
                  <div class="item-right">
                    <dict-tag :options="approval_commit_status" :value="item.approvalStatus" />
                  </div>
                </div>
              </div>
              <div v-else class="empty-state">
                <el-empty description="暂无已审核记录" :image-size="120" />
              </div>

              <!-- 分页组件 -->
              <div v-if="pagination.completed.total > 0" class="pagination-container">
                <pagination :total="pagination.completed.total" v-model:page="pagination.completed.currentPage"
                  v-model:limit="pagination.completed.pageSize" :page-sizes="[10, 20, 30, 50]"
                  @pagination="() => loadCurrentTabData()" />
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="我的提交" name="submitted">
            <div class="tab-content">
              <div v-if="loading" class="loading-container">
                <el-skeleton :rows="5" animated />
              </div>
              <div v-else-if="records.submittedApprovals?.length > 0" class="approval-list">
                <div v-for="item in records.submittedApprovals" :key="item.id" class="approval-item submitted-item"
                  @click="handleItemClick(item, 1)">
                  <div class="item-left">
                    <div class="item-header">
                      <div class="item-title">{{ item.businessTitle }}</div>
                      <span class="meta-time">{{ formatTime(item.createTime) }}</span>
                    </div>
                  </div>
                  <div class="item-right">
                    <dict-tag :options="approval_commit_status" :value="item.approvalStatus" />
                  </div>
                </div>
              </div>
              <div v-else class="empty-state">
                <el-empty description="暂无提交记录" :image-size="120" />
              </div>

              <!-- 分页组件 -->
              <div v-if="pagination.submitted.total > 0" class="pagination-container">
                <pagination :total="pagination.submitted.total" v-model:page="pagination.submitted.currentPage"
                  v-model:limit="pagination.submitted.pageSize" :page-sizes="[10, 20, 30, 50]"
                  @pagination="() => loadCurrentTabData()" />
              </div>
            </div>
          </el-tab-pane>

          <el-tab-pane label="抄送给我" name="cc">
            <div class="tab-content">
              <div v-if="loading" class="loading-container">
                <el-skeleton :rows="5" animated />
              </div>
              <div v-else-if="records.ccApprovals?.length > 0" class="approval-list">
                <div v-for="item in records.ccApprovals" :key="item.id" class="approval-item cc-item"
                  @click="handleItemClick(item, 1)">
                  <div class="item-left">
                    <div class="item-header">
                      <div class="item-title">{{ item.businessTitle }}</div>
                      <span class="meta-time">{{ formatTime(item.createTime) }}</span>
                    </div>
                  </div>
                  <div class="item-right">
                    <dict-tag :options="approval_commit_status" :value="item.approvalStatus" />
                  </div>
                </div>
              </div>
              <div v-else class="empty-state">
                <el-empty description="暂无抄送记录" :image-size="120" />
              </div>

              <!-- 分页 -->
              <div v-if="pagination.cc.total > 0" class="pagination-container">
                <pagination :total="pagination.cc.total" v-model:page="pagination.cc.currentPage"
                  v-model:limit="pagination.cc.pageSize" :page-sizes="[10, 20, 30, 50]"
                  @pagination="() => loadCurrentTabData()" />
              </div>
            </div>
          </el-tab-pane>

        </el-tabs>

      </el-card>
    </div>

    <!-- 系统信息 - 移动到下方 -->
    <div class="system-info-section">
      <el-row :gutter="20">
        <el-col :sm="24" :md="8">
          <el-card class="system-info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon class="header-icon">
                  <Monitor />
                </el-icon>
                <span class="header-title">系统信息</span>
              </div>
            </template>
            <div class="system-info">
              <div class="info-item">
                <span class="info-label">当前版本:</span>
                <el-tag type="success">v5.3.1</el-tag>
              </div>
              <div class="info-item">
                <span class="info-label">运行状态:</span>
                <el-tag type="success">正常运行</el-tag>
              </div>
              <div class="info-item">
                <span class="info-label">在线用户:</span>
                <span class="info-value">{{ onlineUsers }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :sm="24" :md="8">
          <el-card class="system-info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon class="header-icon">
                  <DataAnalysis />
                </el-icon>
                <span class="header-title">性能监控</span>
              </div>
            </template>
            <div class="system-info">
              <div class="info-item">
                <span class="info-label">JVM内存使用:</span>
                <span class="info-value">{{ jvmMemory }}%</span>
              </div>
              <div class="info-item">
                <span class="info-label">CPU使用率:</span>
                <span class="info-value">{{ cpuUsage }}%</span>
              </div>
              <div class="info-item">
                <span class="info-label">磁盘使用:</span>
                <span class="info-value">{{ diskUsage }}%</span>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :sm="24" :md="8">
          <el-card class="system-info-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <el-icon class="header-icon">
                  <TrendCharts />
                </el-icon>
                <span class="header-title">系统统计</span>
              </div>
            </template>
            <div class="system-info">
              <div class="info-item">
                <span class="info-label">今日访问:</span>
                <span class="info-value">{{ todayVisits }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">本月用户:</span>
                <span class="info-value">{{ monthlyUsers }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">系统运行时间:</span>
                <span class="info-value">{{ uptime }}</span>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import { getUserApprovalRecords, getUserApprovalStatistics, getUserPendingApprovalsPage, getUserCompletedApprovalsPage, getUserSubmittedApprovalsPage, getActiveTemplatesForQuery, getUserCcApprovalsPage } from '@/api/other/approval'
import { getOnlineUserCount } from '@/api/other/user'
import type {
  UserApprovalRecordsVo,
  UserApprovalStatisticsVo,
  ApprovalInstanceVo,
  ApprovalFlowTemplateVO
} from '@/api/other/approval/types'
import { getCurrentInstance } from 'vue'
import Pagination from '@/components/Pagination/index.vue'
import { Filter } from '@element-plus/icons-vue'
const router = useRouter();
const { proxy } = getCurrentInstance() as ComponentInternalInstance

// 字典数据
const { approval_commit_status } = toRefs<any>(
  proxy?.useDict('approval_commit_status')
)

// 审核数据相关
const loading = ref(false)
const activeTab = ref('pending')
const maxItems = ref(5)

// 筛选相关
const businessTypeFilter = ref('')
const availableBusinessTypes = ref<ApprovalFlowTemplateVO[]>([])
const loadingTemplates = ref(false)

// 分页数据 - 为每个标签页单独维护分页状态
const pagination = ref({
  pending: { currentPage: 1, pageSize: 10, total: 0 },
  completed: { currentPage: 1, pageSize: 10, total: 0 },
  submitted: { currentPage: 1, pageSize: 10, total: 0 },
  cc: { currentPage: 1, pageSize: 10, total: 0 }
})

const records = ref<UserApprovalRecordsVo>({
  pendingApprovals: [],
  completedApprovals: [],
  submittedApprovals: [],
  ccApprovals: []
})

const statistics = ref<UserApprovalStatisticsVo>({
  pendingCount: 0,
  completedCount: 0,
  submittedCount: 0,
  ccCount: 0,
  totalCount: 0,
  statusCount: {}
})

// 系统信息数据
const onlineUsers = ref(0)
const systemLoad = ref(68)
const jvmMemory = ref(45)
const cpuUsage = ref(32)
const diskUsage = ref(67)
const todayVisits = ref(1250)
const monthlyUsers = ref(856)
const uptime = ref('15天8小时')

// 计算属性

// 获取当前标签页的分页信息
const getCurrentTabPagination = () => {
  const tabKey = activeTab.value as keyof typeof pagination.value
  return pagination.value[tabKey]
}

// 加载审核数据
const loadData = async () => {
  loading.value = true
  try {
    // 根据当前标签页加载对应的分页数据
    await loadCurrentTabData()

    // 加载统计信息
    const statisticsRes = await getUserApprovalStatistics()
    if (statisticsRes.code === 200) {
      statistics.value = statisticsRes.data
    }
  } catch (error) {
    console.error('加载审核数据失败:', error)
    ElMessage.error('加载审核数据失败')
  } finally {
    loading.value = false
  }
}

// 加载当前标签页的数据
const loadCurrentTabData = async () => {
  const currentTabPagination = getCurrentTabPagination()
  const params = {
    pageNum: currentTabPagination.currentPage,
    pageSize: currentTabPagination.pageSize,
    businessType: businessTypeFilter.value || undefined
  }

  let response
  switch (activeTab.value) {
    case 'pending':
      response = await getUserPendingApprovalsPage(params)
      break
    case 'completed':
      response = await getUserCompletedApprovalsPage(params)
      break
    case 'submitted':
      response = await getUserSubmittedApprovalsPage(params)
      break
    case 'cc':
      response = await getUserCcApprovalsPage(params)
      break
    default:
      return
  }

  if (response.code === 200) {
    const data = response

    // 直接更新对应标签页的分页数据和列表数据
    switch (activeTab.value) {
      case 'pending':
        pagination.value.pending.total = data.total || 0
        records.value.pendingApprovals = data.rows || []
        break
      case 'completed':
        pagination.value.completed.total = data.total || 0
        records.value.completedApprovals = data.rows || []
        break
      case 'submitted':
        pagination.value.submitted.total = data.total || 0
        records.value.submittedApprovals = data.rows || []
        break
      case 'cc':
        pagination.value.cc.total = data.total || 0
        records.value.ccApprovals = data.rows || []
        break
    }
  }
}

// 刷新数据
const refreshData = () => {
  loadData()
}

// 加载业务类型列表
const loadBusinessTypes = async () => {
  loadingTemplates.value = true
  try {
    const response = await getActiveTemplatesForQuery()
    if (response.code === 200) {
      availableBusinessTypes.value = response.data || []
    }
  } catch (error) {
    console.error('加载业务类型列表失败:', error)
    ElMessage.error('加载业务类型列表失败')
  } finally {
    loadingTemplates.value = false
  }
}

// 业务类型筛选改变
const handleBusinessTypeChange = () => {
  // 重置所有标签页的分页
  pagination.value.pending.currentPage = 1
  pagination.value.completed.currentPage = 1
  pagination.value.submitted.currentPage = 1

  // 重新加载当前标签页数据
  loadCurrentTabData()
}

// 清空筛选
const clearFilter = () => {
  businessTypeFilter.value = ''
  handleBusinessTypeChange()
}

// 标签页切换
const handleTabChange = async (tabName: string) => {
  activeTab.value = tabName
  // 切换标签页时重置当前标签页的页码
  const currentTabPagination = getCurrentTabPagination()
  currentTabPagination.currentPage = 1
  await loadCurrentTabData()
}

// 项目点击事件
const handleItemClick = (item: ApprovalInstanceVo, flag: number) => {
  // 根据业务类型决定跳转页面
  if (item.businessType === 'CONTRACT-SPLIT-PROJECT') {
    // 合同拆分项目审核跳转到专门的审核页面
    router.push(`/project/pro-audit/index/${item.businessId}`)
  } else if (item.businessType === 'PROJECT-SPLIT-PLAN') {
    // 项目计划审核跳转到专门的审核页面
    router.push(`/project/plan-audit/index/${item.businessId}`)
  } else if (item.businessType === 'WORK-LOG-AUDIT') {
    // 工作日志审核跳转到专门的审核详情页面
    router.push(`/project/worklog-audit/index/${item.businessId}`)
  } else if (item.businessType === 'WEEK-LOG-AUDIT') {
    // 周总结审核跳转到专门的审核详情页面
    router.push(`/project/weeklog-audit/index/${item.businessId}`)
  } else if (item.businessType === 'PROJECT-CONSUME-AUDIT') {
    // 成本消耗审核跳转到专门的审核页面
    router.push(`/project/consume-audit/index/${item.businessId}`)
  } else if (item.businessType === 'DATA-BACKUP-AUDIT') {
    // 数据备份审核跳转到专门的审核页面
    router.push(`/project/backup-audit/index/${item.businessId}`)
  } else {
    // 其他类型跳转到通用审核页面
    router.push({
      path: '/approval',
      state: {
        id: item.id,
        flag: flag,
        title: item.businessTitle || '申请信息'
      }
    })
  }
}





// 格式化时间
const formatTime = (time: string) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()

  if (diff < 60000) { // 1分钟内
    return '刚刚'
  } else if (diff < 3600000) { // 1小时内
    return `${Math.floor(diff / 60000)}分钟前`
  } else if (diff < 86400000) { // 1天内
    return `${Math.floor(diff / 3600000)}小时前`
  } else if (diff < 604800000) { // 7天内
    return `${Math.floor(diff / 86400000)}天前`
  } else {
    return date.toLocaleDateString()
  }
}

// 获取系统信息
const getSystemInfo = async (isInitialLoad = false) => {
  try {
    // 只有在初始加载时才获取在线用户数量
    if (isInitialLoad) {
      const onlineCountRes = await getOnlineUserCount()
      if (onlineCountRes.code === 200) {
        onlineUsers.value = onlineCountRes.data
      } else {
        // 如果API调用失败，使用模拟数据
        onlineUsers.value = Math.floor(Math.random() * 200) + 100
      }
    }

    // 模拟系统负载（实际项目中可以从系统监控API获取）
    systemLoad.value = Math.floor(Math.random() * 50) + 30
  } catch (error) {
    console.error('获取系统信息失败:', error)
    // 如果API调用失败，使用模拟数据
    if (isInitialLoad) {
      onlineUsers.value = Math.floor(Math.random() * 200) + 100
    }
    systemLoad.value = Math.floor(Math.random() * 50) + 30
  }
}

// 监听 activeTab 变化
watch(activeTab, async (newTab, oldTab) => {
  if (newTab !== oldTab) {
    // 切换 tab 时加载对应数据
    await loadCurrentTabData()
  }
})

// 页面挂载时获取数据
onMounted(async () => {
  // 加载业务类型列表
  await loadBusinessTypes()

  // 加载审核数据
  loadData()

  // 获取系统信息（初始加载时获取在线用户数）
  await getSystemInfo(true)

  // 定时更新系统信息（不包含在线用户数请求）
  setInterval(async () => {
    await getSystemInfo(false)
  }, 30000) // 每30秒更新一次
})
</script>

<style lang="scss" scoped>
.home {
  font-family: 'open sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  // 待办主要区域样式
  .todo-main-section {
    margin-bottom: 30px;
    padding: 20px 0;
  }

  // 审核待办卡片
  .approval-todo-card {
    border-radius: 12px;
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    :deep(.el-card__header) {
      padding: 20px;
      border-bottom: 1px solid #f0f2f5;
    }

    :deep(.el-card__body) {
      padding: 0;
    }

    .card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header-left {
        display: flex;
        align-items: center;
        gap: 12px;

        .header-icon {
          font-size: 20px;
          color: #409eff;
        }

        .header-title {
          font-size: 16px;
          font-weight: 600;
          color: #303133;
        }
      }

      .header-right {
        .el-button {
          padding: 6px 12px;
        }
      }
    }

    .statistics-overview {
      display: flex;
      padding: 20px;
      gap: 20px;
      border-bottom: 1px solid #f0f2f5;

      .stat-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;

        &:hover {
          transform: translateY(-2px);
        }

        .stat-number {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 14px;
          color: #606266;
        }

        .stat-icon {
          position: absolute;
          top: 8px;
          right: 8px;
          font-size: 16px;
          opacity: 0.6;
        }

        &.pending {
          background: linear-gradient(135deg, #fff7e6 0%, #fff1d6 100%);

          .stat-number {
            color: #e6a23c;
          }

          .stat-icon {
            color: #e6a23c;
          }
        }

        &.completed {
          background: linear-gradient(135deg, #b5f4c4 0%, #f0f9ff 100%);

          .stat-number {
            color: #67c23a;
          }

          .stat-icon {
            color: #67c23a;
          }
        }

        &.submitted {
          background: linear-gradient(135deg, #ced9f0 0%, #f0f9ff 100%);

          .stat-number {
            color: #409eff;
          }

          .stat-icon {
            color: #409eff;
          }
        }

        &.cc {
          background: linear-gradient(135deg, #fff0f0 0%, #ffe5e5 100%);

          .stat-number {
            color: #e7313b;
          }

          .stat-icon {
            color: #e7313b;
          }
        }

      }
    }

    .filter-section {
      padding: 16px 20px;
      background: #f8f9fa;
      border-bottom: 1px solid #e4e7ed;

      .filter-content {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .filter-label {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 14px;
          color: #606266;
          font-weight: 500;

          .filter-icon {
            font-size: 16px;
            color: #409eff;
          }
        }

        .filter-controls {
          display: flex;
          align-items: center;
        }
      }
    }

    .approval-tabs {
      :deep(.el-tabs__header) {
        margin: 0;
        padding: 0 20px;
        background: #fafafa;
      }

      :deep(.el-tabs__nav-wrap) {
        padding: 0;
      }

      :deep(.el-tabs__content) {
        padding: 0;
      }
    }

    .tab-content {
      height: 500px;
      padding: 20px;
      display: flex;
      flex-direction: column;
    }

    .loading-container {
      padding: 20px 0;
    }

    .approval-list {
      flex: 1;
      overflow-y: auto;
      margin-bottom: 16px;

      .approval-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px;
        margin-bottom: 12px;
        background: #fff;
        border: 1px solid #f0f2f5;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          background: #f8f9fa;
          border-color: #409eff;
          transform: translateX(4px);
        }

        &:last-child {
          margin-bottom: 0;
        }

        .item-left {
          flex: 1;

          .item-header {
            display: flex;
            align-items: center;
          }

          .item-title {
            font-size: 14px;
            font-weight: 500;
            color: #303133;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 0;
          }

          .meta-time {
            font-size: 12px;
            color: #c0c4cc;
            margin-left: 8px; // 控制和标题之间的距离
            white-space: nowrap;
            flex-shrink: 0; // 避免被挤掉
          }
        }

        .item-right {
          display: flex;
          align-items: center;
        }

        &.pending-item {
          border-left: 4px solid #e6a23c;
        }

        &.completed-item {
          border-left: 4px solid #67c23a;
        }

        &.submitted-item {
          border-left: 4px solid #409eff;
        }

        &.cc-item {
          border-left: 4px solid #e7313b;
        }
      }
    }

    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      color: #909399;
    }

    .pagination-container {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 20px;
      border-top: 1px solid #f0f2f5;
      background: #fafafa;
      flex-shrink: 0;
      margin-top: auto;
    }
  }

  // 系统信息区域样式
  .system-info-section {
    margin-bottom: 30px;
    padding: 20px 0;

    .el-row {
      margin: 0 !important;
    }

    .el-col {
      padding: 0 10px;
      margin-bottom: 20px;
    }
  }

  // 系统信息卡片
  .system-info-card {
    border-radius: 12px;
    border: 1px solid #e4e7ed;
    transition: all 0.3s ease;
    height: 100%;

    &:hover {
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
      transform: translateY(-2px);
    }

    :deep(.el-card__header) {
      padding: 20px;
      border-bottom: 1px solid #f0f2f5;
    }

    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;

      .header-icon {
        font-size: 20px;
        color: #409eff;
      }

      .header-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
    }

    .system-info {
      padding: 10px 0;

      .info-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 0;
        border-bottom: 1px solid #f5f7fa;

        &:last-child {
          border-bottom: none;
        }

        .info-label {
          font-size: 14px;
          color: #606266;
          font-weight: 500;
        }

        .info-value {
          font-size: 14px;
          color: #303133;
          font-weight: 600;
          margin-left: 8px;
        }

        .el-progress {
          margin-right: 8px;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .home {
    .todo-main-section {
      padding: 10px 0;
    }

    .system-info-section {
      padding: 10px 0;

      .el-col {
        padding: 0 5px;
        margin-bottom: 15px;
      }
    }

    .approval-todo-card {
      .statistics-overview {
        flex-direction: column;
        gap: 12px;

        .stat-item {
          flex-direction: row;
          justify-content: space-between;
          padding: 12px 16px;

          .stat-number {
            font-size: 20px;
            margin-bottom: 0;
          }
        }
      }

      .filter-section {
        padding: 12px 16px;

        .filter-content {
          flex-direction: column;
          align-items: flex-start;
          gap: 12px;

          .filter-label {
            font-size: 13px;
          }

          .filter-controls {
            width: 100%;

            .el-select {
              width: 100% !important;
            }

            .el-button {
              margin-left: 0 !important;
              margin-top: 8px;
              width: 100%;
            }
          }
        }
      }

      .approval-item {
        .item-left .item-title {
          font-size: 13px;
        }

        .item-meta {
          flex-direction: column;
          align-items: flex-start;
          gap: 4px;
        }
      }
    }

    .system-info-card {
      .system-info {
        .info-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
      }
    }
  }
}
</style>
